<template>
    <div>
        <section style="display:none">
            选择地址
        </section>
        <section class="msite-page">
            <header class="msite-header">
                <div class="location-info">
                    <div class="info-arc">
                        <svg class="location-icon">
                                                                                                                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../static/svg-symbols.svg#location"></use>
                                                                                                                                </svg>
                        <span>{{currentAdressName}}</span>
                        <i class="to-location-icon"></i>
                    </div>
                    <aside class="info-aside">
                        <div class="weather-info">
                            <p>{{weathInfo.temperature}}</p>
                            <p>{{weathInfo.description}}</p>
                        </div>
                        <div class="weather-media">
                            <img :src="getImgPath(weathInfo.image_hash)" alt="">
                        </div>
                    </aside>
                </div>
                <form action="" class="search-form">
                    <input type="text" class="search-input" placeholder="搜索商家、商品" />
                </form>
    
                <div class="hot-info">
                    <span v-for="hot in hotList" :key="hot">{{hot.word}}</span>
                </div>
            </header>
            <section class="food-section">
                <swiper :options="swiperOptionTop" class="swiper-wrap">
                    <swiper-slide v-for="foods in foodsType" :key="foods">
                        <div class="swiper-entry" v-for="(food,index) in foods" :key="index">
                            <figure :title="food.description">
                                <div class="entry-media">
                                    <img :src="imgBaseUrl + food.image_url" :alt="food.title">
                                </div>
                                <figcaption class="entry-text">{{food.title}}</figcaption>
                            </figure>
                        </div>
                    </swiper-slide>
                    <div id="swiper-pagination1" slot="pagination"></div>
                </swiper>
            </section>
            <section class="bus-section">
                <h2 class="bus-title">推荐商家</h2>
                <bus-list v-if="hasGetData"  :geohash="geohash"></bus-list>
            </section>
        </section>
        <footer-menu></footer-menu>
    </div>
</template>

<script>
    import geohash from 'ngeohash'
    import Vue from 'vue'
    import {
        mapState,
        mapActions,
        mapGetters,
        mapMutations
    } from 'vuex'
    import {
        imgBaseUrl
    } from '../../config/env'

    import busList from '../../components/busList'
 
    import footerMenu from '../../components/footerMenu'
    export default {
        data() {
            return {
                currentAdressName: '',
                weathInfo: {},
                hotList: [],
                foodsType: [],
                imgBaseUrl,
                geohash: '',
                hasGetData: false, //是否已经获取地理位置数据，成功之后再获取商铺列表信息
                swiperOptionTop: {
                    loop: false,
                    autoplay: false,
                    pagination: '#swiper-pagination1',
                    paginationType: 'custom',
                    paginationClickable: true,
                    paginationCustomRender: (swiper, current, total) => {
                        var _html = '';
                        for (var i = 1; i <= total; i++) {
                            if (current == i) {
                                _html += '<li class="swiper-pagination-custom active" style="width:8px;height:8px;margin: 0 5px;background: #000;opacity: .6;border-radius: 100%;"></li>';
                            } else {
                                _html += '<li class="swiper-pagination-custom" style="width:8px;height:8px;margin: 0 5px;background: #000;opacity: .2;border-radius: 100%;"></li>';
                            }
                        }
                        return _html; //返回所有的页码html
                    },
                    onClick: swiper => {}
                },
            };
        },
        created() {
    
        },
        async beforeMount() {
    
            this.geohash = this.$route.query.geohash || 'wx4snhtu7pfu';
            // 获取当前地址信息
            await this.$fetch('GET', '/v2/pois/' + this.geohash, {}).then(res => {
                this.currentAdressName = res.name;
                // 记录当前经度纬度
                this.RECORD_ADDRESS(res);
            });
            this.hasGetData = true;
            // 获取天气情况
            await this.$fetch('GET', '/bgs/weather/current', {
                'latitude': this.latitude,
                'longitude': this.longitude,
            }).then(res => {
                // console.log(res)
                this.weathInfo = res;
            });
    
            // 热门搜所
            await this.$fetch('GET', '/shopping/v3/hot_search_words', {
                'latitude': this.latitude,
                'longitude': this.longitude,
            }).then(res => {
                this.hotList = res;
            }).then(() => {});
        },
        computed: {
            ...mapGetters([
                'latitude', 'longitude'
            ]),
        },
        mounted() {
            this.initData()
            // console.log(geohash.decode('ww8p1r4t8'))
        },
        components: {
            busList,
            footerMenu
        },
        methods: {
            ...mapActions([
                'RECORD_ADDRESS'
            ]),
            async initData() {
                let vm = this;
    
                // 获取食品类型
                await this.$fetch('GET', '/v2/index_entry', {
                    'geohash': this.geohash,
                    'flags[]': 'F',
                    'group_type': 1
                }).then(res => {
                    let oldArray = res;
                    let newArray = [];
                    for (let i = 0, j = 0, len = oldArray.length; i < len; i += 8, j++) {
                        newArray[j] = oldArray.splice(0, 8);
                    }
                    this.foodsType = newArray;
                }).then(() => {});

            },

            getImgPath(path) {
                let suffix;
                if (!path) {
                    return 'http://test.fe.ptdev.cn/elm/elmlogo.jpeg'
                }
                if (path.indexOf('jpeg') !== -1) {
                    suffix = '.jpeg'
                } else {
                    suffix = '.png'
                }
                let url = '/' + path.substr(0, 1) + '/' + path.substr(1, 2) + '/' + path.substr(3) + suffix;
                return 'https://fuss10.elemecdn.com' + url
            },
            getHasImgUrl(hashImg) {
                return '//fuss10.elemecdn.com/e/85/' + hashImg + '?imageMogr/format/webp/thumbnail/!69x69r/gravity/Center/crop/69x69/';
            }
        }
    }
</script>

<style lang="stylus" scoped>
    @import '../../assets/stylus/mixin';

    #swiper-pagination1
        text-align: center;
        transform: translate3d(0, 0, 0);
        z-index: 10;
        transition: 300ms;
        position: absolute;
        display:flex;
        align-items:center;
        justify-content: center;
        overflow: hidden;   
    .msite-header 
        display:block;
        padding: .26rem .36rem;
        background-color: #0096ff;
        color: #fff;
        height: 3.25rem;
        .location-info
            height: .92rem;
            display:flex;
            justify-content: space-between;
            align-items: center;
            .info-arc
                display:flex;
                align-items: center;
                width:60%;
                .location-icon
                    width: .5rem;
                    height: .6rem;
                    fill: #fff;
                .to-location-icon
                    width: .18rem;
                    height: .1rem;
                span
                    margin:0 .12rem;
                    font-size:.48rem;
                    max-width:80%;
                    white-space: nowrap;
                    overflow: hidden;

            .info-aside
                display:flex;
                align-items:center;
                .weather-info
                    p
                        font-size: .373333rem;
                .weather-media
                    margin-left: .1rem;
                    width: .74rem;
                    height: .74rem;
                    img
                        width:100%;
                        height:100%;

        .search-input
            display: block;
            margin: .2rem 0;
            width: 100%;
            height: .96rem;
            text-align: center;
            border-radius: .96rem;
            box-shadow: 0 0.02rem 0.06rem 0 rgba(0,0,0,.2);
            color: #333;
            font-size: .35rem;
        .hot-info
            display:flex;
            white-space: nowrap;
            overflow-x: auto;
            span
                &:not(:last-child)
                    margin-right: .4rem;

    .food-section
        display:block;
        border-bottom: 1px solid #eee;
        background-color: #fff;
        min-height: 4.72rem;
        margin-bottom: .27rem;

        .swiper-container
            min-height: 4rem;
        .swiper-entry
            width:25%;
            float:left;
            margin-top: .3rem;
            text-align: center;
            .entry-media
                position: relative;
                display: inline-block;
                width: 1.2rem;
                height: 1.2rem;
                img
                    width:100%;
                    height:100%
                    vertical-align: top;
            .entry-text 
                text-align:center;
                display: block;
                margin-top: .14rem;
                color: #666;
                font-size: .32rem;


    .bus-section
        background:#fff;
        padding-bottom: 1.17rem;
        .bus-title 
            line-height: .9rem;
            font-weight: 600;
            border-top: 1px solid #eee;
            font-size: .4rem;
            padding-left: .4rem;
</style>